<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />
    <title>物体漫游</title>
    <style>
        body {
            position: absolute;
            margin: 0;
            width: 100%;
            height: 100%;
        }

        #mapContainer {
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            float: left;
        }
    </style>
</head>

<body>
    <div id="mapContainer" style="position: relative;"></div>
</body>
<script src='/GiswayEngine.js'></script>
<script type="text/javascript">
    window.app = new GE.App('mapContainer', {
        position: [120.170646, 30.28362, 2000], //相机的位置
        lookAt: [120.170646, 30.28362, 0], //相机看向的地图位置
        cameraScrollSpeed: 5, //鼠标滚动时，控制相机移动的速度
        minZoom: 3, //允许地图的最小层级
        maxZoom: 18, //允许地图的最大层级
        ambientLightIntensity: 5,
        useDefaultTexture: true, //是否使用瓦片默认纹理
        background: "Fog", //背景的类型，参数有如下类型：None, Fog, Color, Gradient, Image, Sky, Image。使用Fog地图的性能会比较好
        // backGroundColorA:'#AAAAFF', //当background的值为Gradient时，需要配置该参数。最下端颜色，默认值为#0000FF
        // backGroundColorB:'#0000FF', //当background的值为Gradient时，需要配置该参数。最上端颜色，默认值为#FF0000
        // backGroundColor: '#F5F5F5', //当background的值为Color时，需要配置该参数，默认值为#00BFFF
        // imageUrl: 'http://localhost:9000/examples/assets/img_logo.39362dc1.png', //当background的值为Image时，需要配置该参数。默认值为null
        baseLayer: [
            //影像底图
            {
                url: ' https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', //影像底图的url
                // url: 'http://115.236.87.26:8848/googleTiles/china_image/{z}/{y}/{x}.jpg',
                urlDecimal: true, //影像底图url中的瓦片行列号是否是十进制，true表示十进制，false表示十六进制
                tileType: 'image', //影像底图
                canNotSelect: false, //true表示该图层不参与射线拾取，false表示图层参与射线拾取
            }
        ]
    });

    window.app.on('Click', function (e) {
        console.log(e);
    });

    window.app.on('MouseHover', function (e) {
        console.log(e);
    });
    window.app.on('MouseUnHover', function (e) {
        console.log("MouseUnHover");
    });

    let pointArray = [ //3857表示web墨卡托坐标系，4326表示经纬度坐标
            new GE.Point(120.170646, 30.28362, 10, '4326'),
            new GE.Point(120.175646, 30.28362, 10, '4326'),
            new GE.Point(120.175646, 30.28662, 10, '4326'),
            new GE.Point(120.175346, 30.28662, 10, '4326'),
            new GE.Point(120.176346, 30.28362, 10, '4326'),
    ];

    var label = htmlMarker('HTML标记', '按钮', new GE.Point(120.170646, 30.28362, 0, '4326'));
    wander(label);
    addLine();

    function wander(model) {//物体漫游的功能
        let objWander = new GE.ObjWander(model); //模型漫游的功能，该功能对模型的朝向有要求：模型的正面需要Z轴朝上

        let path = new Array();//漫游的路径
        // path.push({ objPosition: pointArray[0] }); //因为pointArray的第一个点就是模型的位置，所以这里不需要添加
        path.push({ objPosition: pointArray[1] });
        path.push({ objPosition: pointArray[2] });
        path.push({ objPosition: pointArray[3] });
        path.push({ objPosition: pointArray[4] });

        objWander.wander(path, 10000, function () { //漫游结束的回调事件
            console.log('the wander is over');

            window.app.mouse.addHoverObject(model); //为该模型添加鼠标悬停的功能
           // window.app.mouse.removeHoverObject(model); //为该模型移除鼠标悬停的功能
        })
    }

    var polyline;
    var lineWidth = 1;
    function addLine() {//轨迹线
        let lineData = {
            pointArray: pointArray,  //多边形的顶点数组
            color: '#00FA9A',
            lineWidth: lineWidth,  //线的宽度
        };
        polyline = new GE.Polyline(lineData);
        window.app.add(polyline);
    }
    
    function htmlMarker(contentText, btnText, point) {
        //初始化要显示的标注的html内容
        const div = document.createElement('div');
        div.addEventListener('click', function() {
            alert('信息：' + contentText+'，经纬度:'+point.x + ','+point.y);
        });
        // 为div添加鼠标悬停事件监听器
        div.addEventListener('mouseover', function() {
            console.log('htmlMarker mouseover');
        });

        // 为div添加鼠标离开事件监听器
        div.addEventListener('mouseout', function() {
            console.log('htmlMarker mouseout');
        });

        div.className = 'label';
        div.textContent = contentText; //;
        div.style.backgroundColor = 'transparent';

        const button = document.createElement('button');
        button.innerText = btnText; //;
        button.style.width = '80px';
        button.style.height = '30px';
        button.onclick = function (e) {
            alert('1号按钮点击');
        }
        div.appendChild(button);
        //初始化标注组件，并将htmlelement作为参数传入，这里是一个div
        let label = new GE.HtmlMarker(div);
        //设置组件在三维场景中的位置
        let position = point.toEPSGWeb(); //;
        label.position.set(position.x, position.y, 0);
        //设置对其方式，0,0为中心对齐
        label.center.set(0, 0);
        label.openCollisionCheck(); //开启marker的碰撞检测
        //将组件添加至场景中
        app.add(label);
        return label;
    }


</script>

</html>